<template>
    <view class="back_F7FAFF">
        <view class="home-back">
            <!-- 导航 -->
            <view class="title-box">
                <view class="state-box" :style="{ height: statusBarHeight + 'px' }"></view>
                <view class="flex flex_column py_32 h_88 justify_content_center">
                    <view class="f_32 cl_00091A">
                        <text class="boldTtf">消息</text>
                        <image class="img_40 ml_16" style="vertical-align: middle" :src="url + 'imgs/icon_qc.png'" mode="widthFix"></image>
                        <text class="f_24 cl_00091A" @click="ClearUnread">清除未读</text>
                    </view>
                </view>
            </view>
        </view>
        <scroll-view scroll-y="true" class="box">
            <!-- 列表 -->
            <view class="back_fff br_24 p_32">
                <view v-for="item in list" class="flex u-flex-wrap justify_content_between line_F7FAFF pb_24 pt_24" @click="msg">
                    <view style="width: 96rpx; height: 96rpx; border-radius: 50%; overflow: hidden">
                        <image style="width: 96rpx; height: 96rpx; background-color: #eeeeee" :src="item.img" mode="heightFix"></image>
                    </view>
                    <view style="width: 65%">
                        <text class="f_28">{{ item.name }}</text>
                        <br />
                        <text class="message f_28 mt_16 cl_999CA3">{{ item.text }}</text>
                    </view>
                    <view>
                        <text class="f_24 cl_CCCED1">{{ item.time }}</text>
                        <view class="cl_fff f_20 mt_16 number" v-if="item.number > 0">{{ item.number }}</view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <!-- 底部tab -->
        <view class="flex justify_content_center bottonTab">
            <view @click="click1(0)" class="tabitem">
                <image v-if="tabactive == 0" class="tabIcon" src="@/static/imgs/tabBar/jdy_dd1.png" mode=""></image>
                <image v-else class="tabIcon" src="@/static/imgs/tabBar/jdy_dd.png" mode=""></image>
                <text :class="tabactive == 0 ? 'active' : ''">订单</text>
            </view>
            <view @click="click1(1)" class="tabitem">
                <image v-if="tabactive == 1" class="tabIcon" src="@/static/imgs/tabBar/skills-y.png" mode=""></image>
                <image v-else class="tabIcon" src="@/static/imgs/tabBar/skills-w.png" mode=""></image>
                <text :class="tabactive == 1 ? 'active' : ''">消息</text>
            </view>
            <view @click="click1(2)" class="tabitem">
                <image v-if="tabactive == 2" class="tabIcon" src="@/static/imgs/tabBar/jdy_my1.png" mode=""></image>
                <image v-else class="tabIcon" src="@/static/imgs/tabBar/jdy_my.png" mode=""></image>
                <text :class="tabactive == 2 ? 'active' : ''">我的</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            statusBarHeight: 0,
            windowHeight: 0,
            list: [],
            url: '',
            tabactive: 1
        };
    },
    onShow() {
        this.url = this.baseUrl;
    },
    onLoad() {
        // 获取状态栏高度
        const than = this;
        uni.getSystemInfo({
            success(res) {
                than.statusBarHeight = res.statusBarHeight;
                // 默认px,转成rpx
                than.windowHeight = res.screenHeight * (750 / res.windowWidth) - 100;
            }
        });
        this.getList();
    },
    methods: {
        // 清除未读
        ClearUnread() {
            for (var i = 0; i < this.list.length; i++) {
                console.log(this.list[i].number);
                this.list[i].number = 0;
            }
        },
        click1(e) {
            console.log('click1', e);
            if (e == 0) {
                uni.navigateTo({
                    url: '/pages/business/order'
                });
            }
            if (e == 1) {
                uni.navigateTo({
                    url: '/pages/business/message/message'
                });
            }
            if (e == 2) {
                uni.navigateTo({
                    url: '/pages/business/business'
                });
            }
        },
        isRouter(url) {
            this.$api.auth(url);
        },
        msg() {
            uni.navigateTo({
                url: '/pages/msg/msg'
            });
        },
        getList() {
            this.list = [
                {
                    img: '@/static/imgs/headImg.png',
                    name: '同路仁用户',
                    text: '亲，这个商品只剩一件了哦，喜欢尽快拍下',
                    number: '0',
                    time: '刚刚'
                },
                {
                    img: '@/static/imgs/headImg.png',
                    name: '同路仁用户1',
                    text: '亲，这个商品只剩一件了哦，喜欢尽快拍下',
                    number: '9',
                    time: '刚刚'
                },
                {
                    img: '@/static/imgs/headImg.png',
                    name: '同路仁用户1',
                    text: '亲，这个商品只剩一件了哦，喜欢尽快拍下',
                    number: '50',
                    time: '刚刚'
                },
                {
                    img: '@/static/imgs/headImg.png',
                    name: '同路仁用户1',
                    text: '亲，这个商品只剩一件了哦，喜欢尽快拍下',
                    number: '4',
                    time: '刚刚'
                }
            ];
        }
    }
};
</script>

<style scoped lang="scss">
.active {
    color: #3377ff !important;
}
.bottonTab {
    height: 100rpx;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    padding-bottom: 20rpx;
    padding-top: 20rpx;
}
.tabitem {
    width: 50%;
    margin: 0 auto;
    display: inline-block;
    text-align: center;
    font-size: 28rpx;
    color: #ccced1;
}
.tabIcon {
    width: 40rpx;
    height: 40rpx;
    display: block;
    margin: 0 auto;
}
.home-back {
    width: 750rpx;
    height: 220rpx;
    position: relative;
    background: #f7faff;
    .title-box {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 4;

        .state-box {
            width: 750rpx;
        }
    }
}
.box {
    height: calc(100vh - 220rpx);
    background-color: #fff;
    border-radius: 24rpx 24rpx 0 0;
    overflow: hidden;
}
.message {
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.number {
    background: #ff6401;
    border-radius: 20px;
    padding: 2px;
    text-align: center;
}
</style>
